<template>
    <div class="bg">
        <div class="center">
            <div class="left">
                <div class="headerimg">
                    <img src="" alt="">
                </div>
                <div class="headerright">
                    <div>
                        <em class="diantai"></em>
                        <h3>女友FM</h3>
                    </div>
                    <div class="line2">
                        <img src="" alt="">
                        <a href="#">11111111111111111</a>
                    </div>
                    <div class="line3">
                        <button> <span class="el-icon-star-off"></span>  订阅<em></em></button>
                        <button><span class="el-icon-video-play"></span>播放全部</button>
                        <button><span class="el-icon-share"></span>分享<em></em></button>
                    </div>


                </div>
            </div>
            <div class="right"></div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
* {
        margin: 0;
        padding: 0;
    }
    
    .bg {
        width: 100%;
        height: 100%;
        background-color: rgb(218, 218, 218);
    }
    
    .center {
        background-color: #fff;
        width: 1100px;
        height: 900px;
        margin: auto;
    }
    
    .left {
        float: left;
        width: 710px;
        height: 900px;
        border: 2px solid red;
        padding: 50px 35px 50px 45px;
    }
    
    .right {
        float: left;
        width: 270px;
        height: 900px;
        border: 2px solid rgb(130, 255, 99);
    }
    
    .headerimg {
        float: left;
        background-color: rgb(255, 56, 56);
        width: 200px;
        height: 200px;
    }
    
    .headerimg img {
        width: 200px;
        height: 200px;
    }
    
    .headerright {
        float: left;
        width: 410px;
        height: 200px;
        background-color: rgb(150, 183, 255);
        margin-left: 30px;
    }
    
    .headerright .diantai {
        display: inline-block;
        width: 55px;
        height: 24px;
        background-image: url(../src/assets/icon.png);
        background-repeat: no-repeat;
        background-position-y: -1014px;
        background-color: rgb(7, 255, 20);
    }
    
    .headerright div h3 {
        display: inline-block;
        vertical-align: text-bottom;
    }
    
    .line3 button {
        width: 100px;
        height: 40px;
    }
</style>